<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { orderLists, orderUpdate } from '@/api/interface/web/order'
import { typeAll } from '@/api/interface/web/type'
import router from '@/router'
import SendAccountForm from '@/components/form/SendAccountForm.vue'
import { ElMessage } from 'element-plus'

const fullscreenLoading = ref(false)

const userStore = useUserStore()

const searchForm: any = ref({
  typeName: '',
  username: '',
  status: '',
})

const typeOptions: any = ref([])

const getTypeOptions = () => {
  typeAll({}).then((res: any) => {
    typeOptions.value = res.map((v: any) => {
      return {
        label: v.name,
        value: v.name,
      }
    })
  })
}
getTypeOptions()

const statusOptions = ref([
  {
    label: '未支付',
    value: 0,
  },
  {
    label: '已支付',
    value: 1,
  },
  {
    label: '已发货',
    value: 2,
  },
])

const handleSearch = () => {
  getOrdersFun()
}

const handleResetSearch = () => {
  searchForm.value = {}
  orderPage.value = 1
  orderTotal.value = 10
  getOrdersFun()
}

const orderPage: any = ref(1)
const orderSize: any = ref(10)
const orderTotal: any = ref(10)
const orders: any = ref([])
const getOrdersFun = () => {
  const options: any = { page: orderPage.value, size: orderSize.value }
  Object.keys(searchForm.value).forEach((key: any) => {
    if (searchForm.value[key]) {
      options[key] = searchForm.value[key]
    }
  })
  orderLists(options).then((res: any) => {
    orders.value = res.list.map((v: any) => {
      return {
        ...v,
      }
    })

    orderTotal.value = res.total
  })
}

const handleCurrentChange = () => {
  getOrdersFun()
}

const handleSendOrder = (item: any) => {
  dialogSendVisible.value = true
  sendData.value = item
}

const sendAccountFormRef = ref()
const dialogSendVisible = ref(false)
const sendData: any = ref({})
const handleDialogSendClose = () => {
  dialogSendVisible.value = false
}

const handleDialogSendSubmit = () => {
  fullscreenLoading.value = true
  sendAccountFormRef.value.submitForm().then((data: any) => {
    if (data) {
      orderUpdate(data)
        .then((data: any) => {
          if (data) {
            dialogSendVisible.value = false
            ElMessage.success('发货成功!')
            userStore.refreshUserInfo()
            getOrdersFun()
          }
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    } else {
      fullscreenLoading.value = false
    }
  })
}

const download = (item: any) => {
  const blob = new Blob([item.remark], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `${item.name}---${item.price}元.txt`

  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

onMounted(() => {
  if (!userStore.userInfo || userStore.userInfo.username != 'admin') {
    router.push('/home')
    return
  }
  getOrdersFun()
})
</script>

<template>
  <div class="home-wrapper" v-loading.fullscreen="fullscreenLoading">
    <div class="order-wrapper">
      <div class="title-box">
        <h1 :class="{ title: true }">激活列表</h1>
      </div>
      <div class="search-box">
        <el-form ref="formRef" :model="searchForm" class="order-search-form">
          <el-form-item prop="typeName" label="类型:">
            <el-select v-model="searchForm.typeName" placeholder="类型">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="username" label="账号:">
            <el-input v-model="searchForm.username" placeholder="请输入账号" />
          </el-form-item>

          <el-form-item prop="status" label="状态:">
            <el-select v-model="searchForm.status" placeholder="状态">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" text bg @click="handleResetSearch">
              <template #icon>
                <el-icon><Refresh /></el-icon>
              </template>
              重置
            </el-button>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <el-icon><Search /></el-icon>
              </template>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="order-box">
        <div class="order-content" v-if="orderLists.length > 0">
          <div class="order-item" v-for="(item, index) in orders" :key="index">
            <div class="avatar-name-price">
              <div class="avatar-name">
                <img class="avatar" :src="'/images/icon' + item.avatar" alt="" />
                <div class="name">{{ item.name }}</div>
                <div class="username">{{ item.username }}</div>
              </div>

              <div class="price-num-sum">{{ item.price }} x {{ item.num }} = {{ item.sum }}元</div>
            </div>

            <div class="status-utils">
              <div class="status">
                <span class="success" v-if="item.status == 2">已发货</span>
                <span class="info" v-if="item.status == 1">未发货</span>
              </div>

              <div class="utils" v-if="item.status == 1">
                <el-button
                  type="primary"
                  class="download"
                  @click="handleSendOrder(item)"
                  style="padding: 8px 10px"
                  size="small"
                >
                  去发货
                </el-button>
              </div>

              <div class="utils" v-if="item.status == 2">
                <el-button type="primary" class="download" link @click="download(item)">
                  下载
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          size="small"
          background
          v-model:current-page="orderPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="orderTotal"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <BaseDialog v-model="dialogSendVisible" width="420px">
    <template #title> 发货 </template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogSendClose">取消</el-button>
      <el-button type="primary" @click="handleDialogSendSubmit" class="buyConfirm"
        >确认发货</el-button
      >
    </template>
    <SendAccountForm ref="sendAccountFormRef" :data="sendData" />
  </BaseDialog>
</template>
<style lang="scss" scoped>
.home-wrapper {
  width: 1200px;
  height: 100%;
  display: flex;

  .order-wrapper {
    width: 100%;
    padding: 22px 32px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
    border-radius: 15px;
    background: #fff;
    color: #3a5072;
    display: flex;
    flex-direction: column;

    .title-box {
      .title {
        font-weight: 500;
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 700;
        color: #333;
      }
    }

    .order-search-form {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        width: 33.3%;
        padding-right: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
    }

    .order-box {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .order-content {
        border: 1px solid #e1e6ee;
        border-radius: 10px;
        flex: 1;
        overflow-y: auto;
        margin-bottom: 15px;
        .order-item {
          width: 100%;
          padding: 16px;
          box-sizing: border-box;

          .avatar-name-price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: -17px;
            margin-bottom: 8px;

            .avatar-name {
              display: flex;
              align-items: center;
              .avatar {
                width: 60px;
              }
              .name {
                color: #333;
                font-weight: 700;
                font-size: 14px;
              }
            }

            .username {
              color: #333;
              font-weight: 700;
              font-size: 14px;
              margin-left: 20px;
            }

            .price-num-sum {
              font-size: 14px;
              align-items: center;
              justify-content: space-between;
            }
          }

          .status-utils {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .status {
              .success {
                font-size: 14px;
                color: var(--theme-color-success);
              }

              .info {
                font-size: 14px;
                color: var(--theme-color-info);
              }
            }
          }

          .utils {
            .download {
              padding: 0;
            }
          }
        }

        // .order-item:nth-child(odd) {
        //   background-color: #f0f5ff;
        // }

        .order-item:last-child {
          border-bottom: 0;
        }
      }

      :deep(.el-pagination.is-background) {
        --el-pagination-hover-color: var(--theme-color);
        .el-pager {
          li.is-active {
            background-color: var(--theme-color);
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.buyConfirm {
  background-color: var(--theme-color);
  border: 0;
}

.buyConfirm:hover {
  background-color: #e7712e;
}
</style>
